<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.value"
          clearable
          placeholder="输入搜索内容"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.type"
          clearable
          placeholder="类型"
          class="filter-item"
          style="width: 130px"
        >
          <el-option
            v-for="item in queryTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <el-date-picker
          v-model="query.recordTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" />
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!-- 图片预览 -->
      <el-dialog
        class="previewModel"
        :close-on-click-modal="false"
        :visible.sync="handlePreviewDialog"
        title="预览图片"
        top="20vh"
        width="700px"
      >
        <div class="pictureImg">
          <el-carousel
            :interval="1000"
            indicator-position="none"
            trigger="click"
            :autoplay="false"
            type="always"
            :loop="loopPerview"
            ref="carousel"
            height="400px"
          >
            <el-carousel-item v-for="(item,index) in photoList" :key="index">
              <img class="dialog" :src="item.src" alt>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="handlePreviewDialog=false">取消</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
        @row-click="rowClick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('sn')" width="150" prop="sn" label="控制器编号" />
        <el-table-column v-if="columns.visible('nickName')" width="150" prop="nickName" label="昵称" />
        <el-table-column v-if="columns.visible('indexNumber')" prop="indexNumber" label="记录索引" />
        <el-table-column
          v-if="columns.visible('recordTypeDesc')"
          prop="recordTypeDesc"
          label="记录类型"
        />
        <el-table-column
          v-if="columns.visible('recordValidDesc')"
          prop="recordValidDesc"
          label="有效性"
        />
        <el-table-column
          v-if="columns.visible('recordDoorNoDesc')"
          prop="recordDoorNoDesc"
          label="门号"
        />
        <el-table-column
          v-if="columns.visible('recordInOrOutDesc')"
          prop="recordInOrOutDesc"
          label="进门/出门"
        />
        <el-table-column width="220" label="图片" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              class="filter-item previewBtn"
              size="mini"
              @click.native.prevent="previewClick(scope.row)"
            >预览</el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('recordCardNo')"
          prop="recordCardNo"
          label="卡号"
          width="150"
        />
        <el-table-column
          v-if="columns.visible('recordTime')"
          prop="recordTime"
          label="刷卡时间"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.recordTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-permission="['admin','attendanceLog:edit','attendanceLog:del']"
          label="操作"
          width="250px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudAttendanceLog from '@/api/sapientialSite/attendanceLog'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

// crud交由presenter持有
const defaultCrud = CRUD({
  title: '考勤日志',
  url: 'api/attendanceLog',
  sort: 'id,desc',
  crudMethod: { ...crudAttendanceLog }
})
const defaultForm = {
  id: null,
  sn: null,
  indexNumber: null,
  recordType: null,
  recordValid: null,
  recordDoorNo: null,
  recordInOrOut: null,
  recordCardNo: null,
  recordTime: null,
  reason: null,
  isDelete: null,
  createUser: null,
  createDate: null,
  updateUser: null,
  updateDate: null
}
export default {
  name: 'AttendanceLog',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'attendanceLog:add'],
        edit: ['admin', 'attendanceLog:edit'],
        del: ['admin', 'attendanceLog:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: 'sn', display_name: '控制器编号' },
        { key: 'indexNumber', display_name: '记录索引' }
      ],
      handlePreviewDialog: false,
      photoList: [],
      loopPerview: true
    }
  },
  created() {
    this.crud.optShow.download = true
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      this.crud.params = {}
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }
      return true
    },
    rowClick(row, event, column) {
      console.log(row)
    },
    // 预览考勤日志图片
    previewClick(row, event, column) {
      if (row.picturePathDesc === null) {
        this.$message.warning('暂无抓取的图片')
        return false
      } else {
        var pictureUrl = row.picturePathDesc.split(',')
        var srcObject = []
        pictureUrl.forEach(element => {
          if (element === null || element === '') {
            console.log('有空的路径')
          } else if (element !== null || element !== '') {
            srcObject.push({ src: element })
          }
        })
        console.log('dfasdfasdfas', srcObject)
        if(srcObject.length === 1) {
          this.loopPerview = false
        } else {
          this.loopPerview = true
        }
        this.photoList = srcObject
        this.handlePreviewDialog = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.previewBtn {
  margin-left: 5px;
}

.dialog {
  height: 100%;
  width: 100%;
  background-size: cover;
}

.previewModel {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #eeeeee;
  }
  /deep/ .el-dialog__body {
    height: 430px;
  }
}
</style>
